<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Array Test Bed</title>
<link href="../css/global.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="../js/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function( ) {
	$('.example').each(function() {
		$this = $(this); // reference to the p tag
		//alert($this.find('a').html());
		$this.find('a').click(function() {
			var oldHTML=$('#messageBox #changeContainer').html();
			oldHTML = oldHTML.replace(/></g,'> <');
			$('#before').text(oldHTML);
			text = $('#content').val();
			//text = text.replace(/\s/g,'');
			var codeElem = $(this).prev('code');
			var code = codeElem.text();
			code = code.replace(/\(\)/,"('" + text + "')");
			$('#jquery').text(code);
			eval(code);
			var newHTML=$('#messageBox #changeContainer').html();
			newHTML = newHTML.replace(/></g,'> <');
			$('#after').text(newHTML);
		});
	});
});


		
		
	</script>
<style type="text/css">
<!--
#messageBox {
	float: right;
	width: 400px;
	padding: 10px;
	background: #E6E2AE;
	border: 1px solid #0A3737;
	margin-top: 15px;
}

#messageBox code {
	font-size: 15px;
}

#message {
	font-size: 16px;
	border: 1px solid red;
	padding: 5px;
}

#message p {
	font-size: 16px;
}

.codeRun {
	font-weight: bold !important;
	color: red;
}

#oneCol #contentWrap {
	float: none;
}
#oneCol #main {
	float: none;
	margin-left: 20px;
}
-->
</style>
</head>

<body id="oneCol">
<div id="container">
  <div id="banner"><img src="../images/banner.png" alt="JavaScript: The Missing Manual" width="760" height="65"><span id="badge"><a href="http://www.sawmac.com/missing/js/"></a></span></div>
  
  <div id="contentWrap">
  <div id="main">
   
  <h1> jQuery Content Functions Test Bed</h1>
 <h2>jQuery Command</h2>
  <p id="jquery" class="codeRun">jQuery command will appear here.</p>
  <div id="messageBox">
   <div id="changeContainer">
  <div id="message"><p>New content will go here</p></div>
  </div>
    <h2>HTML Before:</h2>
  <code id="before">&lt;div id=&quot;message&quot;&gt;&lt;p&gt;New content will go here&lt;/p&gt;&lt;/div&gt;</code>
  <h2>HTML After:</h2>
  <code id="after"></code>
	</div>
  <form name="form1" method="post" action="">
    <h2>Replacement Content</h2>
    <p>
      <textarea name="content" cols="30" rows="4" id="content"></textarea>
   
    </p>
  </form>
  
  <h2>.text()</h2>
  <p class="example"><code>$('#message').text(<span class="text"></span>);</code>
    <a href="#">Run It</a></p>
    <h2>.html()</h2>
  <p class="example"><code>$('#message').html(<span class="text"></span>);</code>
   <a href="#">Run It</a></p>
   <h2>.append()</h2>
  <p class="example"><code>$('#message').append(<span class="text"></span>);</code>
   <a href="#">Run It</a></p>
   <h2>.prepend()</h2>
  <p class="example"><code>$('#message').prepend(<span class="text"></span>);</code>
   <a href="#">Run It</a></p>
    <h2>.after()</h2>
  <p class="example"><code>$('#message').after(<span class="text"></span>);</code>
   <a href="#">Run It</a></p>
    <h2>.before()</h2>
  <p class="example"><code>$('#message').before(<span class="text"></span>);</code>
   <a href="#">Run It</a></p>
       <h2>.replaceWith()</h2>
    <p class="example"><code>$('#message').replaceWith(<span class="text"></span>);</code>
   <a href="#">Run It</a></p>
       <h2>.remove()</h2>
    <p class="example"><code>$('#message').remove(<span class="text"></span>);</code>
   <a href="#">Run It</a></p>
       <h2>.empty()</h2>
    <p class="example"><code>$('#message').empty(<span class="text"></span>);</code>
   <a href="#">Run It</a></p>
  </div>
  </div>
  
<div id="footer"><em>&#8220;Building Interactive Web Sites with JavaScript&#8221;</em></div>
</div>
</body>
</html>
